<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <el-row>
          <el-col :span="4" style="margin-top: 10px">
            <el-avatar
              size="large"
              icon="el-icon-user-solid"
              :src="detail ? detail.avatar : ''"
            ></el-avatar>
          </el-col>
          <el-col :span="20">
            <div class="company-title-box__title">
              <h1>{{ detail.nickName }}</h1>
              <el-tag v-if="detail.status === 1" type="success"> {{ detail.statusStr }}</el-tag>
              <el-tag v-if="detail.status === 0" type="danger">{{ detail.statusStr }}</el-tag>
            </div>
            <div class="company-title-box__credit">用户ID：{{ detail.gcbUserCode }}</div>
          </el-col>
        </el-row>
      </div>
      <div class="company-title-box-btn">
        <el-button
          v-if="detail.status === 1"
          type="danger"
          size="mini"
          @click="handleStatus(detail.id, 0)"
        >
          禁用
        </el-button>
        <el-button
          v-if="detail.status === 0"
          type="success"
          size="mini"
          @click="handleStatus(detail.id, 1)"
        >
          启用
        </el-button>
      </div>
    </div>

    <div class="company-context-box">
      <el-row style="background: #e6ebf5">
        <el-col :span="8">
          <el-descriptions
            :column="1"
            size="small"
            :label-style="{ width: '100px', background: '#e6ebf5' }"
            :content-style="{ background: '#e6ebf5' }"
            border
          >
            <el-descriptions-item label="昵称">
              {{ detail.nickName ? detail.nickName : '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="用户ID">
              {{ detail.gcbUserCode }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              {{ detail.mobile }}
              <el-button
                type="text"
                size="mini"
                @click="handleUpdateMobile(detail.id, detail.mobile)"
              >
                <i class="el-icon-phone"></i>更换
              </el-button>
            </el-descriptions-item>
            <el-descriptions-item label="性别">
              {{ detail.sex ? detail.sex : '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
              {{ detail.age ? detail.age : '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="所在城市">
              {{ detail.province ? detail.province : '' + detail.city ? detail.city : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="学历">
              {{ detail.education ? detail.education : '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="8">
          <el-descriptions
            :column="1"
            size="small"
            :label-style="{ width: '100px', background: '#e6ebf5' }"
            :content-style="{ background: '#e6ebf5' }"
            border
          >
            <el-descriptions-item label="工作经验">
              {{ detail.experience ? detail.experience : '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="身份标签">
              {{ detail.tag ? detail.tag : '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="注册方式">
              {{ detail.signTypeStr ? detail.signTypeStr : '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">
              {{ detail.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="账号状态">
              <el-tag size="mini" v-if="detail.status === 1" type="success">
                {{ detail.statusStr }}
              </el-tag>
              <el-tag size="mini" v-if="detail.status === 0" type="danger">
                {{ detail.statusStr }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="8">
          <el-descriptions
            :column="1"
            size="small"
            :label-style="{ width: '100px', background: '#e6ebf5' }"
            :content-style="{ background: '#e6ebf5' }"
            border
          >
            <el-descriptions-item label="实名认证">
              <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
              <el-tag size="mini" v-if="detail.authStatus === 0" type="info">
                {{ detail.authStatusStr }}
              </el-tag>
              <el-tag size="mini" v-if="detail.authStatus === 1" type="success">
                {{ detail.authStatusStr }}
              </el-tag>
              <el-tag size="mini" v-if="detail.authStatus === 2" type="warning">
                {{ detail.authStatusStr }}
              </el-tag>
              <el-tag size="mini" v-if="detail.authStatus === 3" type="danger">
                {{ detail.authStatusStr }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="真实姓名">
              {{ detail.name }}
            </el-descriptions-item>
            <el-descriptions-item label="身份证号">
              {{ detail.identityCard }}
            </el-descriptions-item>
            <el-descriptions-item label="实名时间">
              {{ detail.authTime }}
            </el-descriptions-item>
            <el-descriptions-item label="船员资质认证">
              <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
              <el-tag size="mini" v-if="detail.crewAuthStatus === 0" type="info">
                {{ detail.crewAuthStatusStr }}
              </el-tag>
              <el-tag size="mini" v-if="detail.crewAuthStatus === 1" type="success">
                {{ detail.crewAuthStatusStr }}
              </el-tag>
              <el-tag size="mini" v-if="detail.crewAuthStatus === 2" type="warning">
                {{ detail.crewAuthStatusStr }}
              </el-tag>
              <el-tag size="mini" v-if="detail.crewAuthStatus === 3" type="danger">
                {{ detail.crewAuthStatusStr }}
              </el-tag>
              <el-button
                v-if="detail.crewAuthStatus === 0 || detail.crewAuthStatus === 3"
                type="text"
                size="mini"
                @click="handleCrewAuth(detail.mobile)"
              >
                <i class="el-icon-edit"></i>发起认证
              </el-button>
            </el-descriptions-item>
            <el-descriptions-item label="首次认证时间">
              {{ detail.crewAuthTime ? detail.crewAuthTime : '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="认证更新时间">
              {{ detail.crewAuthUpdateTime ? detail.crewAuthUpdateTime : '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <div
        class="title"
        style="
          margin: 20px 0 20px 0;
          height: 20px;
          line-height: 20px;
          border-left: 1px solid #ccc;
          text-indent: 15px;
        "
      >
        关联企业组织
      </div>
      <!-- 表格 -->
      <basic-table
        ref="vBasicTable"
        :show-pagination="false"
        :api="getUserCompanyList"
        :before-fetch="beforeFetch"
        :table-schema="tableSchema"
        :actions="tableActions"
        :table-prop="tableProp"
        :row-info="{ rowKey: 'data' }"
      >
        <template #companyInfo="{ row }">
          <div>{{ row.companyName }}</div>
          <div>{{ row.companyCode }}</div>
        </template>
        <template #leader="{ row }">
          <span>
            {{ row.leader }}
            <template v-if="row.leaderMobile"> ({{ row.leaderMobile }}) </template>
          </span>
        </template>
        <template #adminInfo="{ row }">
          <el-row>
            <el-col :span="6">
              <el-avatar size="large" icon="el-icon-user-solid" :src="row.adminAvatar"></el-avatar>
            </el-col>
            <el-col :span="18">
              <span>{{ row.adminName }}</span>
              <span>{{ row.adminMobile }}</span>
            </el-col>
          </el-row>
        </template>
        <template #companyAuthStatusStr="{ row }">
          <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
          <el-tag v-if="row.companyAuthStatus === 0" type="info">
            {{ row.companyAuthStatusStr }}
          </el-tag>
          <el-tag v-if="row.companyAuthStatus === 1" type="success">
            {{ row.companyAuthStatusStr }}
          </el-tag>
          <el-tag v-if="row.companyAuthStatus === 2" type="warning">
            {{ row.companyAuthStatusStr }}
          </el-tag>
          <el-tag v-if="row.companyAuthStatus === 3" type="danger">
            {{ row.companyAuthStatusStr }}
          </el-tag>
        </template>
        <template #waterStatusStr="{ row }">
          <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
          <el-tag v-if="row.waterStatus === 0" type="info">
            {{ row.waterStatusStr }}
          </el-tag>
          <el-tag v-if="row.waterStatus === 1" type="success">
            {{ row.waterStatusStr }}
          </el-tag>
          <el-tag v-if="row.waterStatus === 2" type="warning">
            {{ row.waterStatusStr }}
          </el-tag>
          <el-tag v-if="row.waterStatus === 3" type="danger">
            {{ row.waterStatusStr }}
          </el-tag>
        </template>
        <template #companyStatusStr="{ row }">
          <el-tag v-if="row.companyStatus === 0" type="danger">
            {{ row.companyStatusStr }}
          </el-tag>
          <el-tag v-if="row.companyStatus === 1" type="success">
            {{ row.companyStatusStr }}
          </el-tag>
        </template>
        <!-- 表格上方按钮-->
        <template #tableHead="{ total }">
          <div>已加入{{ total }}家企业</div>
          <div style="height: 32px">
            <el-button size="mini" type="primary" @click="handleAddCompany">创建新企业</el-button>
            <el-button size="mini" type="primary" @click="handleJoinCompany">
              加入已有企业
            </el-button>
          </div>
        </template>
      </basic-table>
    </div>
    <!-- 添加或修改企业配置对话框 -->
    <save-company-dialog
      title="创建新企业"
      :is-visible.sync="open"
      @dialogCallBack="handleDialogCallBack"
      ref="saveCompanyDialog"
    ></save-company-dialog>
    <join-company-dialog
      :user-id="detail.id"
      :is-visible.sync="joinCompanyDialogVisible"
      @joinCompanyCallBack="handleJoinCompanyCallBack"
    ></join-company-dialog>
  </div>
</template>

<script>
import {
  getUserDetail,
  batchUpdateStatus,
  getUserCompanyList,
  changeMobile,
} from '@/api/user/user';
import { tableActions, tableSchema } from '@/views/user/detail/modal.data';
import saveCompanyDialog from '@/views/enterprise/list/components/SaveCompanyDialog.vue';
import JoinCompanyDialog from '@/views/user/detail/components/JoinCompanyDialog.vue';

export default {
  components: { saveCompanyDialog, JoinCompanyDialog },
  data() {
    return {
      tableSchema: tableSchema,
      tableActions: tableActions(this.handleCompanyDetail),
      tableProp: {},
      tableEvent: {},
      detail: {
        id: null, // id
        gcbUserCode: null, // 用户编号
        name: '', // 用户真实姓名
        nickName: '', // 用户昵称
        mobile: '', // 手机号
        sex: null, // 性别
        age: null, // 年龄
        province: null, // 省份
        city: null, // 城市
        education: null, // 学历
        experience: null, // 工作经验
        tag: null, // 标签
        signType: null, // 注册方式
        signTypeStr: '', // 注册方式字符串
        createTime: null, // 注册时间
        status: null, // 状态
        statusStr: '', // 状态字符串
        authStatus: null, // 认证状态
        authStatusStr: '', // 认证状态字符串
        identityCard: '', // 身份证号
        authTime: null, // 认证时间
        crewAuthStatus: null, // 船员认证状态
        crewAuthStatusStr: '', // 船员认证状态字符串
        crewAuthTime: null, // 船员
        crewAuthUpdateTime: null, // 船员认证更新时间
      },
      // 是否显示弹出层
      open: false,
      joinCompanyDialogVisible: false,
    };
  },
  mounted() {
    this.getUserDetail();
  },
  methods: {
    // 获取用户详情
    getUserDetail() {
      getUserDetail(this.$route.query.id).then((res) => {
        this.detail = res.data;
      });
    },
    getUserCompanyList,

    beforeFetch() {
      let query = {
        userId: this.$route.query.id,
      };
      if (query.userId) {
        return query;
      }
      return query;
    },
    handleStatus(id, status) {
      batchUpdateStatus({ ids: [id], status: status }).then(() => {
        this.$message.success('操作成功');
        this.getUserDetail();
      });
    },
    handleCompanyDetail(id) {
      this.$router.push({ name: 'CompanyDetail', query: { id: id } });
    },
    handleUpdateMobile(id, oldMobile) {
      this.$prompt('原手机号：' + oldMobile + '，请输入新手机号', '更换手机号', {
        confirmButtonText: '确定更换',
        cancelButtonText: '取消',
        inputPattern: /^1[3456789]\d{9}$/,
        inputErrorMessage: '手机号格式不正确',
        inputPlaceholder: '请输入新手机号',
      }).then(({ value }) => {
        changeMobile(id, value).then(() => {
          this.$message.success('更换成功');
          this.getUserDetail();
        });
      });
    },
    handleCrewAuth(mobile) {
      this.$router.push({ name: 'CrewSave', query: { mobile: mobile } });
    },
    handleAddCompany() {
      this.open = true;
    },
    handleDialogCallBack() {
      this.open = false;
      this.getUserDetail();
    },
    handleJoinCompany() {
      this.joinCompanyDialogVisible = true;
    },
    handleJoinCompanyCallBack() {
      this.joinCompanyDialogVisible = false;
      this.getUserDetail();
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    width: 300px;
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
